import React from "react";

export default class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            checkbox:true
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleCheckChange = this.handleCheckChange.bind(this);

    }

    handleChange(event) {
        const value = event.target.value;
        this.setState({value: value});
    }
    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }
    handleCheckChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        //拿到checkbox的名字
        const name = target.name;
        this.setState({
            [name]: value
        });
    }

    render() {
        return (
            <React.Fragment>
            <h3>FORMS</h3>
            <form onSubmit={this.handleSubmit}>
                <label htmlFor="textarea">Essay:</label><br/>
                    <textarea id="textarea"  value={this.state.value} onChange={this.handleChange} /><br/>
                    <input type="submit" value="Submit" /><br/>
                <select>
                    <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="mango">Mango</option>
                </select><br/>
                <input type="number"/><br/>
                <label>
                    checkbox:
                <input
                    name="checkbox"
                    type="checkbox"
                    checked={this.state.checkbox}
                    onChange={this.handleCheckChange} />
                </label>
            </form>
            </React.Fragment>
        );
    }
}